<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="fragment/head"/>
    <!-- BEGIN Page level plugins -->
    <link href="resources/assets/global/plugins/datatables/datatables.min.css" rel="stylesheet"/>
    <link href="resources/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css"
          rel="stylesheet"/>
    <link href="resources/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css"
          rel="stylesheet"/>
</head>

<body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-content-white page-sidebar-closed">
<th:block th:with="
    ERPConstants = ${T(com.sh.caryr.erp.util.ERPConstants)} ,
    authTarget = ${ERPConstants.AUTH_TARGET_TRADE} ,
    createAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_CREATE},
    deleteAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_DELETE},
    updateAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_UPDATE},
    exportAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_EXPORT},
    importAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_IMPORT},
    submitAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_SUBMIT},
    packingAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_PACKING},
    deliverAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_DELIVER},
    signoffAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_SIGNOFF},
    settleAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_SETTLE},
    closeAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_CLOSE}
">
    <!-- BEGIN HEADER INNER -->
    <th:block th:replace="fragment/header"/>
    <!-- BEGIN CONTAINER -->
    <div class="page-container">
        <!-- BEGIN SIDEBAR -->
        <th:block th:replace="fragment/sidebar"/>
        <!-- BEGIN CONTENT -->
        <div class="page-content-wrapper">
            <!-- BEGIN CONTENT BODY -->
            <div class="page-content">
                <!-- BEGIN PAGE BAR -->
                <div class="page-bar">
                    <ul class="page-breadcrumb">
                        <li><a href="index.html" class='msg_home'>控制台</a> <i class="fa fa-circle"></i></li>
                        <li><span class='msg_asOrder_management'>售后管理</span></li>
                    </ul>
                </div>
                <!-- BEGIN main content -->
                <div class="row">
                    <!-- BEGIN ===========page level content============= -->
                    <div class="col-md-12">
                        <!-- BEGIN Error Message -->
                        <div class="alert alert-danger hidden" id="form_error_msg">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
                            <strong class="msg_err_title"></strong>
                            <span class="msg_err_subTitle"> </span>
                        </div>
                        <!--======== Instruction ========-->
                        <div class="alert alert-success instruction"></div>
                        <!--======== Data table ========-->
                        <div class="portlet box green datatable-portlet">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-list"></i><span class=''>售后服务列表</span>
                                </div>
                                <div class="tools">
                                    <button th:if="${ session.isSuperUser||session.authStr.contains(createAuth)}"
                                            id="btn_sync_orders" class="btn sbold green" title="同步数据">
                                        <i class="fas fa-link"></i>
                                    </button>
                                    <button id="btn_refresh_dt" class="btn sbold green" title="刷新">
                                        <i class="fas fa-sync"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <table class="table table-striped table-bordered table-hover dt-responsive"
                                       width="100%" id="dt_trade" cellspacing="0">
                                    <thead>
                                    <tr>
                                        <th width="2%">
                                            <label
                                                    class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                                <input type="checkbox" class="group-checkable"
                                                       data-set="#dt_trade .checkboxes"/>
                                                <span></span>
                                            </label></th>
                                        <th width='' class=''>服务单号</th>
                                        <th width='' class=''>交易单号</th>
                                        <th width='' class=''>类型</th>
                                        <th width='' class=''>产品名称</th>
                                        <th width='' class='msg_ent_fld_receiver'></th>
                                        <th width='' class='msg_ent_fld_phone'></th>
                                        <th width='' class='msg_ent_fld_address'></th>
                                        <th width='' class=''>平台服务单号</th>
                                        <th width='' class=''>平台订单号</th>
                                        <th width='' class=''>状态</th>
                                        <th width='' class=''>产品状态</th>
                                        <th width='' class=''>申请时间</th>
                                        <th width="2%"></th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>

                    </div>
                    <!-- END ===========page level content============= -->
                </div>
            </div>
        </div>
    </div>

    <th:block th:replace="fragment/rear"/>
    <!-- BEGIN Page level plugins -->
    <script src="resources/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="resources/assets/global/plugins/datatables/datatables.min.js"></script>
    <script src="resources/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js"></script>
    <script src="resources/assets/caryr/caryr.datatable.js"></script>
    <!-- END Page level plugins -->
</th:block>
<script th:inline="javascript">
    jQuery(document).ready(function () {

        /*[+
        caryr.lang = [[${session.lang}]];
        var createAuth = ('true'==[[${session.isSuperUser||session.authStr.contains(createAuth)?'true':'false'}]]);
        var updateAuth = ('true'==[[${session.isSuperUser||session.authStr.contains(updateAuth)?'true':'false'}]]);
        var disableModify = ('true'==[[${session.isSuperUser||session.authStr.contains(updateAuth)?'false':'true'}]]);
        +]*/
        var tableId = '#dt_trade';
        /***************** dataTable **************/
        var dataTable = caryr.dataTable.create({
            url: "api/asOrder",
            defaultOrderBy: 11,
            defaultOrderByDir: "Desc",
            tableId: tableId,
            lang: caryr.lang,
            columns: [
                {data: 'id'},
                {
                    data: 'orderId', render: function (id) {
                        return id ? "<a href='orderDetails?orderId=" + id + "' target='_blank'>" + id + "</a>" : '';
                    }
                },
                {data: 'typeDesc'},
                {data: 'extProductSpecName'},
                {data: 'receiver'},
                {data: 'phoneNum'},
                {data: 'address'},
                {data: 'extId'},
                {data: 'extOrderId'},
                {data: 'statusDesc'},
                {
                    data: 'returnType',
                    render: function (type) {
                        var html = type == '0' ? '' : '<span class="inline_display msg_return_type_' + type + '"></span>';
                        var option1Select1 = type == '1' ? " selected " : '';
                        var option1Select2 = type == '2' ? " selected " : '';
                        html +=
                            '<select class="inline_input hidden form-control sel_returnType" ' +
                            'name="returnType" value="' + type + '">' +
                            '<option value="0"></option>' +
                            '<option value="1" ' + option1Select1 + '>可用</option>' +
                            '<option value="2" ' + option1Select2 + '>损毁</option>' +
                            '</select>';
                        return html;
                    }
                },
                {data: 'applyTime'}
            ],
            enableInlineEdit: true,
            onInlineSave: function (data, e) {
                inlineSave(data, e);
            }
        });

        $('#btn_sync_orders').on('click', function () {
            caryr.ajaxReq({
                url: "api/asOrder/syncAsOrder/",
                type: "POST",
                success: function () {
                    dataTable.draw();
                }
            });
        });
        /***************** Function **************/
        function inlineSave(data, e) {
            var rowEle = $(e).closest('tr');
            var entity = caryr.collectEntity(rowEle);
            data.returnType = entity.returnType;
            caryr.ajaxReq({
                url: "api/asOrder/returnType",
                type: "PUT",
                data: data,
                success: function () {
                    caryr.updateInlineProp(rowEle, "returnType", data.returnType);
                    dataTable.draw();
                }
            });
        }
    });
</script>
</body>
</html>